<!--
    -  Copyright (c) 2018-2025, haohanwork.com All rights reserved.
  -->
<template>
  <div class="execution">
    <!--<basic-container>-->
      <!--<h2 class="io-goods-detail">基础信息</h2>-->
      <!--<el-form :inline="true" class="demo-form-inline">-->
        <!--<el-form-item label="仓库">-->
          <!--<el-input v-model="warehouseSn" placeholder="请输入"></el-input>-->
        <!--</el-form-item>-->
      <!--</el-form>-->
    <!--</basic-container>-->
    <basic-container>
      <h2 class="io-goods-detail">出库单商品清单</h2>
      <template>
        <el-form :inline="true" class="demo-form-inline">
          <el-form-item label="商品">
            <el-select v-model="value" @change="handleSelectionChange(oldData,$event)" filterable placeholder="请输入商品">
              <el-option
                v-for="item in oldData"
                :key="item.id"
                :label="item.goodsName"
                :value="item.id"
                >
              </el-option>
            </el-select>
          </el-form-item>
          <el-button type="primary" @click="showAllGoods">查看所有商品</el-button>&nbsp;&nbsp;&nbsp;
          <el-form-item label="数量">
            <el-input placeholder="请输入" v-model="allNum"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="findGood">添加</el-button>
          </el-form-item>
        </el-form>
        <el-dialog title="商品列表" :visible.sync="dialogVisible">

          <el-table :data="goodsInfo" border>
            <el-table-column property="goodsImg" label="商品图片" width="120" align="center">
              <template slot-scope="scope">
                <img :src="scope.row.modelUrl" width="45" height="45"/>
              </template>
            </el-table-column>
            <el-table-column property="goodsName" label="商品名称" align="center"></el-table-column>
            <el-table-column property="modelUnit" label="单位" align="center"></el-table-column>
            <el-table-column property="goodsCategory" label="商品分类" align="center"></el-table-column>
            <el-table-column property="modelName" label="规格" align="center"></el-table-column>
            <el-table-column fixed="right" label="操作">
              <template slot-scope="scope">
                <el-button type="text" size="small" @click="handleSelectionChange(scope.row)">选择</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div style="width: 100%;text-align: center">
            <el-pagination
              small
              :page-size="page.pageSize"
              @prev-click="prev"
              @next-click="next"
              @current-change="currentChange"
              :current-page="page.currentPage"
              layout="prev,pager,next"
              :total="page.total">
            </el-pagination>
          </div>
          <div slot="footer" scope="scope" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
          </div>
        </el-dialog>
        <el-table :data="tableData" border show-summary style="width: 100%">
          <el-table-column prop="id" label="序号" type="index" width="100px"></el-table-column>
          <el-table-column prop="productName" label="商品">
          </el-table-column>
          <el-table-column prop="unit" sortable label="单位"></el-table-column>
          <el-table-column prop="productNumber" sortable label="原有库存"></el-table-column>
          <el-table-column label="实际库存">
            <template slot-scope="scope">
              <el-input placeholder="请输入内容" v-model="scope.row.afterNumber"></el-input>
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作">
            <template slot-scope="scope">
              <el-button @click.native.prevent="deleteRow(scope.$index, tableData)" type="text" size="small">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
      <template>
        <el-form :inline="true" class="demo-form-inline" style="margin-top: 20px;width: 400px">
          <el-form-item label="备注">
            <el-input v-model="remarks" type="textarea" placeholder="请输入"></el-input>
          </el-form-item>
        </el-form>
        <div class="return-btn">
          <el-button type="primary" @click="save">保存</el-button>
          <el-button type="primary" plain @click="backup">取消</el-button>
        </div>
      </template>
    </basic-container>
  </div>
</template>
<!-- 采购退货 -->
<script>
  import { mapGetters } from "vuex";
  import {
    goodsList as good,
    addWarehouseInventory
  } from '@/api/scm/warehouse/warehouseinventory'
  import {
    goodsList
  } from '@/api/scm/warehouse/exit_warehouse'
  import Util from '@/util/pds/utils'
  let cookieUtil = new Util();
  export default {
    name: "addpurchaseback",
    data() {
      return {
        tableData: [],
        page: {
          total: 31, // 总页数
          currentPage: 1, // 当前页数
          pageSize: 6 // 每页显示多少条
        },
        dialogVisible: false,
        goodsInfo: [],
        warehouseSn:'',
        allNum:'',
        params:{},
        remarks:'',
        oldData:[],
        value:''
      };
    },
    computed: {
      ...mapGetters(["permissions",'tagWel', 'tagList', 'tag', 'website']),
      tagLen() {
        return this.tagList.length || 0
      }
    },
    created(){
      this.getList(this.page,this.params);
    },
    methods: {
      showAllGoods() {
        this.dialogVisible = true;
      },
      prev() {
        let params = {};
        this.page.currentPage = this.page.currentPage - 1;
        this.getList(this.page, params);
      },
      next() {
        let params = {};
        this.page.currentPage = this.page.currentPage + 1;
        this.getList(this.page, params);
      },
      currentChange(page) {
        let params = {};
        this.page.currentPage = page;
        this.getList(this.page, params)
      },
      findGood(){
        let params = {
          productPlaceStatus:0,
          goodsModelId: this.select.id
        }
        good(Object.assign({
          current: 1,
          size: 500
        }, params)).then(response => {
          if(!response.data.data.records.length){
            this.$message.error("暂无商品");
          }
          response.data.data.records.forEach(item=>{
            item.afterNumber = this.allNum;
          })
          this.tableData = response.data.data.records;
        })
      },
      deleteRow(index, rows) {
        this.tableData.splice(index, 1);
      },
      save(){
        // if(this.warehouseSn == ''){
        //   this.$message.error("请输入仓库编号");
        //   return false;
        // }
        if(this.tableData == []){
          this.$message.error("请选择商品");
          return false;
        }
        let params = {
          pmId: this.getStore({name: "pmId"}),
          infos: this.tableData,
          goodsModelId: this.select.id,
          goodsName:this.select.goodsName,
          unit:this.select.modelUnit
        };
        addWarehouseInventory(params).then(res => {
          if (res.data.code == 0) {
            this.$message.success("添加成功")
            let _this = this;
            setTimeout(function () {
              _this.close();
            },2000)
          } else {
            this.$message.error("添加失败")
          }
        });
      },
      getList(page, params) {
        if(this.goodsInfo.length){
          var tmp = [];
          for(var i in this.oldData) {
            if (i <= page.currentPage * 10 && i >= (page.currentPage - 1) * 10) {
              tmp.push(this.oldData[i]);
            }
          }
          this.goodsInfo = tmp;
          return false;
        }
        goodsList(Object.assign({
          current: page.currentPage,
          size: page.pageSize
        }, params)).then(response => {
          response.data.data.forEach(item=>{
            item.productNumber = 0;
          })
          this.page.total = response.data.data.length;
          this.oldData = response.data.data;
          this.goodsInfo = [];
          for(var i in response.data.data) {
            if (i <= page.currentPage * 10 && i >= (page.currentPage - 1) * 10) {
              this.goodsInfo.push(response.data.data[i]);
            }
          }
          this.tableLoading = false;
        })
      },
      handleSelectionChange(val,index) {
        if(index){
          val.forEach(item=>{
            if(item.id == index){
              this.select = item
            }
          })
        }else{
          this.select = val;
        }
        this.value = this.select.goodsName;
        this.dialogVisible = false;
      },

      // 数据合计
      getSummaries(param) {
        const {columns, data} = param;
        const sums = [];
        columns.forEach((column, index) => {
          if (index === 0) {
            sums[index] = '合计';
            return;
          } else if (index !== 3 && index !== 4) {
            sums[index] = '';
            return;
          }
          const values = data.map(item => Number(item[column.property]));
          if (!values.every(value => isNaN(value))) {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr);
              if (!isNaN(value)) {
                return prev + curr;
              } else {
                return prev;
              }
            }, 0);
            sums[index] = sums[index].toFixed(2);
          } else {
            sums[index] = 'N/A';
          }
        });
        return sums;
      },
      close(){
        var str_before = location.href.split('#')[1];
        let { tag, key } = this.findTag(str_before);
        this.$store.commit('DEL_TAG', tag);
        this.$router.go(-1);
      },
      findTag(value) {
        let tag, key
        this.tagList.map((item, index) => {
          if (item.value === value) {
            tag = item
            key = index
          }
        })
        return { tag: tag, key: key }
      }
    }
  };
</script>

<style lang="scss" scoped>
  .io-goods-detail {
    margin-bottom: 10px;
  }
  .settle-accounts {
    text-align: right;
  }
  .basic-information {
    margin-top: 20px;
    font-weight: inherit;
  }
  .return-btn {
    height: 100px;
    width: 100%;
    text-align: center;
    line-height: 100px;
  }
</style>
